var header = document.getElementById('header');
        var box=document.getElementById('box');
        var index = document.getElementById('index').children;

        
        var timer;
        var num = 0;

        //图片移动
        function move(){
            box.style.transform="translate("+(-1536*num)+"px)";
        }
        function imgMove(){
            num++;
            if (num>2) {
                num=0;
            }
            move();
            subscript();
        }

        function clean(){
            for(var i=0;i<index.length;i++){
                index[i].className='';
            }
        }
        //小圆点
        function subscript(){
            clean();
            index[num].className='current';
        }

        //小圆点绑定事件
        for(var i = 0;i<index.length;i++){
            index[i].tag=i;
            index[i].onclick=function(){
                for(var j=0;j<index.length;j++){
                    index[j].className='';
                }
                this.className='current';
                num=this.tag;
                box.style.transform="translate("+(-1536*num)+"px)";
            }
        }

        $('.left').click(function(){
                num--;
                if (num<0) {
                    num=2;
                }else if (num>2) {
                    num=0;
                }
                subscript();
                box.style.transform="translate("+(-1536*num)+"px)";
            })

        $('.right').click(function(){
            num++;
            if (num<0) {
                num=2;
            }else if (num>2) {
                num=0;
            }
            subscript();
            box.style.transform="translate("+(-1536*num)+"px)";
        })

        $('#header').mouseenter(function(){
            $('#header .left').show();
        })
        $('#header').mouseleave(function(){
            $('#header .left').hide();
        })
        $('#header').mouseenter(function(){
            $('#header .right').show();
        })
        $('#header').mouseleave(function(){
            $('#header .right').hide();
        })

        timer=setInterval(imgMove,6000);
        header.onmouseenter=function(){
            clearInterval(timer);
        }
        header.onmouseleave=function(){
            timer=setInterval(imgMove,6000);
        }


            $('.recommend').mouseenter(function(){
                $('.hot').show();
                $('.hot').mouseenter(function(){
                    $('.hot').show();
                })
            })
            $('.hot').mouseleave(function(){
                $('.hot').hide();
            })

            $('.reserve').mouseenter(function(){
                $(this).css("background-color","#fd3701");
                $(this).css("color","white");
                $(this).find("i").css("background-position","-700px -300px");
            })
            $('.reserve').mouseleave(function(){
                $(this).css("background-color","white");
                $(this).css("color","#fd3701");
                $(this).find("i").css("background-position","-700px -250px");
            })